<template>
  <view class="selctRol-page">
    <view class="com_container select-container">
      <scroll-view scroll-y="true">
        <view class="select-title">选择您的角色</view>
        <view class="selct-role-box " :class="{ 'selected-box': activeIndex === index }"  @click="handleSelect(item, index)"
          v-for="(item, index) in selctData" :key="item.id">
          <image class="faren"  :src="activeIndex === index ?  'https://www.worldintek.com:39011/yaolexue-service/icon_faren_active.png' : 'https://www.worldintek.com:39011/yaolexue-service/icon_faren.png' " mode=""></image>
          <text class="role" > {{item.roleName}}</text>
        </view>
        <button class="con_button next-btn" @click="goToInfo">下一步</button>
        <view class="SelectPostulant">
          <u-checkbox-group v-model="checked">
            <u-checkbox checked="true"  shape="square" activeColor="#999999" label="是否自愿成为志愿者"
              labelColor="#999999" :name='true' labelSize="14"></u-checkbox>
          </u-checkbox-group>
           
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0,
        checked: [],
        selctData: [],
        roleName: '',
        roleId: '',
        mobile: ''
      };
    },
    onLoad(query) {
      console.log(query);
      this.mobile = query.phone
        this.getRoleList()
        
    },
    methods: {
      handleSelect(item, index) {
        this.activeIndex = index
      
        this.roleId = item.id
        this.roleName = item.roleName
        // console.log(this.roleId, this.roleName);
      },
      goToInfo() {
        uni.navigateTo({
          url: '/subPages/basisInfo/basisInfo',
        })
      },
     async getRoleList() {
        const res = await this.$http.get('/yaolexue-service-portal/sysRole/findPortalRole',{},{isNeedLoading:false})
        if(res.code === 200) {
          this.selctData = res.data
          this.handleSelect( this.selctData[0],0)
        }
        
      },
      goToInfo() {
     
        if(!this.checked == true) {
           uni.showToast({
            title: '请勾选成为志愿者',
            icon: 'none',
          });
          return
        } 
        uni.navigateTo({
          url:`/subPages/basisInfo/basisInfo?roleId=${this.roleId}&&phone=${this.mobile}`
        })

      }
    }
  }
</script>

<style lang="scss">

 .selctRol-page {
    .select-container {
      .select-title {
        width: fit-content;
        height: 45rpx;
        font-size: 48rpx;
        font-family: SimSun;
        font-weight: 400;
        color: #333333;
        -webkit-text-stroke: 1px #333333;
        text-stroke: 1px #333333;
        margin: 140rpx 0 95rpx 0;
      }


      
      .selected-box {
        box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(250,49,42,0.97) inset;
        // opacity: 0.72;
        color: #333333 !important;
        
        
      }
      .selct-role-box {
        width: 561rpx;
        height: 110rpx;
        background: #E1E1E1;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        margin-bottom: 42rpx;
        
        .faren {
          width: 57rpx;
          height: 61rpx;
          margin-left: 56rpx;
          margin-right: 54rpx;
          
          
        }
        .role {
          width: fit-content;
          height: 26rpx;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #333333;
          
        }
      }

      .next-btn {
        margin-top: 141rpx;
      }

      .SelectPostulant {
        display: flex;
        justify-content: center;
        margin: 27rpx 0 85rpx 0;
      }

    }
  }

</style>
